<template>
    <div id='goods_box' > 
        <!-- 商品图片/价格 -->
        <div class='goods_img' v-for='products in products' :key='products.id+"a"'>
           <li class='gd_img'> <img src='/static/order/a1.jpg'></li>
           <div class="hr_shadow"></div>
           <p class='gd_info'  >{{products.title}}</p>
           <div class='goods_info'>
               <div class='g_i_r' >
                    <li class='now_price'><span>￥</span>{{products.nowprice}}</li>
                    <li class='old_price'>{{products.oldprice}}</li>
               </div>
               <div class='g_i_l'>加入购物车</div>
           </div>
        </div> 
        <!-- 商品促销内容   -->
        <div class='goods_promote'>
               <span class='g_p_en'>促销</span>
               <div class='g_p_info' v-for='products in products' :key='products.id+"d"'>
                   <span class='g_p_discount'>直降</span>
                   <span class='g_p_discountt'>{{products.discount}}</span>
               </div>
        </div>
        <!-- 商品信息 -->
        <div class='shop_info' v-for='products in products' :key='products.id+"c"' >
               <div class='s_i_top'>
                   <div class='s_i_t_l'>
                      <span class='s_i_l'></span> {{products.shopname}}
                    </div>
                   <div class='s_i_t_r'>
                       <span class='s_i_r'></span>联系商家
                   </div>
               </div>
               <div class='s_i_bottom'>
                   <span class='s_i_b_l'>商品评价</span>
                   <span class='s_i_b_r'>暂无评价</span>
               </div>
        </div>
        <!-- 更多商品推荐 -->
        <div class='goods_more'>
            <p class='more_like'>也许你还喜欢</p>
             <!-- 滑动部分开始 -->
             <div class="swiper-pagination"></div>
             <div class="swiper-container">
                <div class="swiper-wrapper">
                    <!-- 模块1 -->
                     <div class="swiper-slide ck">
                         <li v-for='lista in lists' :key='lista.id' class='ck_son'>
                             <img :src='lista.imgsrc' alt='' class='ck_img'>
                             <span class='sw_g_info'>{{lista.title}}</span>
                             <p>
                                 <span class='sw_g_price'><i>￥</i>{{lista.price}}</span>
                                 <span class='add'></span>
                             </p>
                         </li>
                     </div>
                    <!-- 模块2 -->
                     <div class="swiper-slide ck">
                          <li v-for='listb in lists' :key='listb.id' class='ck_son'>
                             <img :src='listb.imgsrc' alt='' class='ck_img'>
                             <span class='sw_g_info'>{{listb.title}}</span>
                             <p>
                                 <span class='sw_g_price'>{{listb.price}}</span>
                                 <span class='add'></span>
                             </p>
                         </li>
                     </div>
                    <!-- 模块3 -->
                     <div class="swiper-slide ck">
                          <li v-for='listc in lists' :key='listc.id' class='ck_son'>
                             <img :src='listc.imgsrc' alt='' class='ck_img'>
                             <span class='sw_g_info'>{{listc.title}}</span>
                             <p>
                                 <span class='sw_g_price'>{{listc.price}}</span>
                                 <span class='add'></span>
                             </p>
                         </li>
                     </div>
                </div>
             </div>
             <!-- 滑动部分结束 -->
        </div>
    </div>
</template>
<script>
import $ from "jquery";
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  data() {
    return {
      products: [],
      lists: []
    };
  },
//   滑动模块js
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true,
      direction: "horizontal",
      loop: true,
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination"
      }
      // 如果需要前进后退按钮
    });
  },
  created() {
    this.loadProducts();
    this.loadLists();
  },
  //加载数据库
  methods: {
    loadProducts() {
      this.$jq.get(this.apiurl + "/goods/products").done(result => {
        this.products = result.data1;
      });
    },
    loadLists() {
      this.$jq.get(this.apiurl + "/goods/products").done(result => {
        this.lists = result.data2;
      });
    },
  }
};
</script>
<style>
#goods_box {
  font-size: 0.81rem;
  width: 100%;
  background:#f4f4f4;
}
/* goods_img开始 */
.goods_img,.goods_promote,.shop_info,.goods_more{
    background: #fff;
}
.goods_img {
  width: 100%;
}
.gd_img {
  width: 100%;
}
.gd_img > img {
  width: 100%;
  height: auto;
}
.gd_info {
  text-align: center;
  font-size: 1rem;
  padding: 0 1.25rem;
  margin: 0.625rem 0 0.125rem;
  color: #333;
}
.hr_shadow {
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  background: linear-gradient(
    left,
    #ffffff 0%,
    #d4d3d3 49%,
    #d4d3d3 50%,
    #ffffff 100%
  );
  box-shadow: inset 0 0.5rem 0.31rem rgba(255, 255, 255, 0.8);
}
.goods_info{
    width:100%;
    padding:1rem 0 0.8rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.05rem solid #cccccc;
}
.now_price{
    display: inline-block;
    font-size: 1.875rem;
    color: #ff3434;
    margin-right: 0.375rem;
    margin-left:0.8rem;
    width:50%;
}
.now_price>span{
    font-size:1.25rem;
}
.old_price{
    display: inline-block;
    font-size: 0.875rem;
    color: #acacac;
    margin-right: 0.675rem;
    text-decoration: line-through;
    padding-left: 0.2rem;
}
.g_i_l{
    background-color: #47b34f;
    display: inline-block;
    padding: 0  0.675rem;
    font-size: 0.8125rem;
    color: #fff;
    height: 2.1rem;
    line-height: 2.1rem;
    margin-right:0.8rem;
}
.goods_promote{
    font-size:0.75rem;
    display: flex;
    justify-content: space-between;
    padding:1rem 0.8rem;
}
.g_p_en{
    text-align: left;
    color: #999999;
    width:10%;
}
.g_p_info{
    text-align: left;
    color: #333333;
    width:90%;
}
.g_p_discount{
    background: #FFCE0B;
    display: inline-block;
    padding: 0 0.1rem;
    margin-right: 0.25rem;
    border-radius: 0.125rem;
    color: #ffffff;
    height: 0.875rem;
    line-height: 0.875rem;
}
.shop_info{
    margin-top:0.8rem;
    font-size:0.8125rem;
    color:#333333;
}
.s_i_top{
    display: flex;
    justify-content: space-between;
    width:100%;
}
.s_i_t_l{
    text-align: left;
    line-height: 3.125rem;
}
.s_i_l{
    background: url(/static/good_Detail_Icon.png)no-repeat;
    background-size:12.5rem 9.375rem;
    background-position: -2.75rem 0.6rem;
    height: 1.25rem;
    width: 1.25rem;
    display: inline-block;
    padding-top: 0.2rem;
    margin-left:0.8rem;
}
.s_i_t_r{
     text-align: right;
     line-height: 3.125rem;
     margin-right:0.8rem;
}
.s_i_r{
    background: url(/static/good_Detail_Icon.png)no-repeat;
    background-size:12.5rem 9.375rem;
    background-position:-1.4rem 0.6rem;
    height: 1.25rem;
    width: 1.25rem;
    display: inline-block;
    padding-top: 0.2rem;
}
.s_i_bottom{
    padding:0.8rem 0.8rem;
    border-top: 0.05rem solid #cccccc;
    justify-content: space-between;
    display: flex;
}
/* goods_img结束 */
/* 滑动模块开始 */
.goods_more{
    padding:0.2rem 0.8rem 2rem;
    margin-top:0.8rem;
}
.more_like{
    font-size:0.875rem;
}
.ck{
    display: flex;
    width:100%;
    justify-content: space-between;
    flex-wrap: wrap;
}
.ck_son{
    width:33%;
    text-align: left;
}
.ck_img{
    width:100%;
}
.swiper-pagination{
    right:0.8rem;
}
.swiper-pagination-bullet{
    margin-left:0.2rem;
}
.sw_g_price{
    display: inline-block;
    text-align: left;
    color: #ff3434;
    font-size: 0.975rem;
    height: 1.74rem;
    line-height: 1.625rem;
    margin: 0.3125rem;
}
.sw_g_price>i{
    font-style: normal;
    font-weight:normal;
    font-size:0.675rem;
}
.add{
    background: url(/static/addNumSprite.png) no-repeat;
    background-position: 0 0.25rem;
    background-size:cover;
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
}
/* 滑动模块结束 */
</style>
